<template>
  <div>
    <h1>库存商品</h1>
    <br><br>
    <h3></h3>
    <br>
    <el-input type="text" v-model="SQEName" placeholder="商品类型" style="width: 10%"></el-input>

    <el-button type="primary" @click="queryByTypeName()">搜索</el-button>
    <br><br>
    <el-row>
      <el-table :data="SQEList" stripe>
        <el-table-column prop="goodsName" label="商品名称"></el-table-column>
        <el-table-column prop="goodsCode" label="商品编号"></el-table-column>

        <el-table-column prop="goodsImg" label="商品图片">
          <template #default="scope">
            <el-image :src="'http://43.142.64.29:8333/faces/'+scope.row.goodsImg" style="width: 50px;height: 50px"></el-image>
          </template>

        </el-table-column>
        <el-table-column prop="goodsSpecification" label="商品规格"></el-table-column>
        <el-table-column prop="goodsNum" label="商品数量">
          <template #default="scope">
            <el-input v-model="scope.row.goodsNum" @change="change(scope.row)"></el-input>
          </template>
        </el-table-column>
        <el-table-column prop="goodsPrice" label="商品价钱"></el-table-column>
        <el-table-column prop="goodsType" label="商品类型"></el-table-column>
        <el-table-column label="操作">
          <template #default="scope">

            <el-button type="primary" @click="alter()">删除商品</el-button>

            <el-dialog v-model="update" title="删除" width="30%">
                          <h1 style="color: red">是否确定删除该商品</h1>
              <el-button type="primary" @click="deleteGoods(scope.row)">确定</el-button>

            </el-dialog>
          </template>
        </el-table-column>
      </el-table>

    </el-row>
    <br>
    <el-pagination v-model:current-page="curPage" @current-change="handleCurrentChange" v-model:page-size="pageSize"
                   background :total="total">

    </el-pagination>

    <el-button type="primary" @click="addSQE()">添加商品库存</el-button>
    <el-dialog v-model="add" title="添加商品库存" width="30%">
      <el-form :model="form" ref="form">
        <el-form-item label="商品名字">
          <el-input v-model="form.goodsName"></el-input>
        </el-form-item>
        <el-form-item label="商品价钱">
          <el-input v-model="form.goodsPrice"></el-input>
        </el-form-item>
        <el-form-item label="商品规格">
          <el-input v-model="form.goodsSpecification "></el-input>
        </el-form-item>


        <el-form-item label="类别">
          <el-select v-model="form.goodsType" placeholder="请选择类型" :disabled="formlist">
            <el-option
                v-for="item in lessonArray"
                :key="item.typeId"
                :label="item.typeName"
                :value="item.typeName">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="数量">
          <el-input v-model="form.goodsNum"></el-input>
        </el-form-item>

        <el-form-item label="照片">
          <!--          <el-input v-model="form.img" hidden="hidden"></el-input>-->
          <el-upload
              class="avatar-uploader"
              action="/apf/file/facePic"
              name="headPic"
              :show-file-list="false"
              :on-success="handleAvatarSuccess"
              :before-upload="beforeAvatarUpload"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" style="width: 50px;height: 50px"/>
            <el-icon v-else class="avatar-uploader-icon">
              <Plus/>
            </el-icon>
            <el-button slot="trigger"
                       size="small"
                       type="primary"
            >更换照片
            </el-button>
          </el-upload>
        </el-form-item>
      </el-form>

      <el-button type="primary" @click="search()">确定</el-button>

    </el-dialog>


    <br><br>
    <h3>导入供应商excel
      <el-input type="text" v-model="scan" style="width: 10%"></el-input>
      <a href="">浏览</a></h3>


  </div>
</template>

<script>
import axios from "axios";
import {ElMessage} from "element-plus";
import servicePath from "../serviceConfig";

export default {
  name: "SQE",
  created() {
    this.queryByTypeName()

  },
  data() {
    return {
      imageUrl: '',
      SQEList: [],
      curPage: 1,
      pageSize: 3,
      total: 0,
      SQEName: '',
      businessScope: '',
      pick: false,
      update: false,
      add: false,
      form: {
        goodsName: '',
        goodsPrice: '',
        goodsSpecification: '',
        goodsType: '',
        goodsNum: '',
        goodsImg: ''

      },
      lessonArray: []
    }
  }, methods: {
    change(scope){
      let param=new URLSearchParams()

      axios.post("/apf/goodsDetail/updateGoodsNum",scope).then(res=>{

      })
    },





    queryByTypeName(){
      let param=new URLSearchParams()
      param.append("typeName",this.SQEName)
      axios.post("/apf/goods/findByTypeName",param,
          {
        'headers': {'token': localStorage.getItem("token")}
      }).then(res=>{
        this.SQEList=res.data
        console.log(this.SQEList)
      })
    },




    handleAvatarSuccess(res) {

      this.imageUrl = servicePath + res;
      this.form.goodsImg = res
      console.log(this.form.goodsImg )

    },
    handleCurrentChange(page) {

      this.curPage = page;

      this.search()

    },
    search() {
      /*let param = new URLSearchParams();
      param.append("pageNo", this.curPage)
      param.append("pageSize", this.pageSize)
      param.append("name", this.SQEName)
      param.append("scope", this.businessScope)*/

      axios.post("/apf/goods/addGoods", this.form,
          {
            'headers': {'token': localStorage.getItem("token")}
          }).then(res => {
          this.form=[];
          this.add=false
        this.queryByTypeName()

      })


    },
    see(scope) {
      this.pick = true;
      this.form = scope


    },
    alter(scope) {
      this.update = true
      this.form = scope

    },
    deleteGoods(scope) {

      axios.post("/apf/goodsDetail/deleteGoods", scope).then(res => {
        this.update = false;
        this.queryByTypeName()
        ElMessage({
          message: '删除成功',
          type: 'success'
        })
      })


    },
    addSQE() {
      this.add = true
      axios.post("/apf/goodsType/queryType", null).then(res => {

        this.lessonArray = res.data
      })

    },
    addSupplier() {
      let param = this.form
      console.log(param)
      axios.post("/api/supplier/addSupplier", param).then(res => {
        this.add = false;
        ElMessage({
          message: '添加成功',
          type: 'success'
        })
      })


    }


  }
}
</script>

<style scoped>

</style>